//导入模块
import { load } from "/code/admin/util/LoadView.js"
load("reguser")
const editUsersForm = document.getElementById("editUsersForm")
const editusername = document.querySelector("#editusername")
const introduction = document.querySelector("#introduction")
const editpassword = document.querySelector("#editpassword")
const zhezhao = document.querySelector(".zhezhao")
const userhead = document.querySelector("#userhead")
let photo = ""
let data_id = ""
//渲染用户列表
async function abcd() {
    let res = await fetch("http://localhost:3000/users").then(res => res.json())
    document.querySelector(".userListItem").innerHTML = res.map(function (item) {
        return `<li data-index=${item.id}>
    <span>${item.username}</span>
    <span><img src="${item.photo}" style="width:50px;height:50px;border-radius:50%;"></span>
    <span>
    <button type="button" class="btn btn-primary" id="edit"}>编辑</button>
    <button type="button" class="btn btn-danger" id="deleteUser" ${item.default ? "disabled" : ""}>删除</button>
    </span>
    </li>`
    }).join("")
}
abcd()
//将编辑 和删除 事件委托给 userListItem
document.querySelector(".userListItem").onclick = async function (evt) {
    //编辑
    if (evt.target.id == "edit") {
        editUsersForm.style.display = "flex";
        zhezhao.style.display = "block";
        data_id = evt.target.parentElement.parentElement.dataset.index
        let res = fetch(`http://localhost:3000/users?id=${data_id}`).then(res => res.json())
            .then(res => {
                editusername.value = res[0].username
                editpassword.value = res[0].password
                introduction.value = res[0].instruction
                photo = res[0].photo
            })
    } else if (evt.target.id == "deleteUser") {//删除
        data_id = evt.target.parentElement.parentElement.dataset.index
        if (data_id == 1) {
            return alert("默认账号不可以删除,请不要点击")
        } else if (confirm("确实要删除吗?")) {
            await fetch(`http://localhost:3000/users/${data_id}`, {
                method: "DELETE"
            }).then(res => res.json())
            evt.target.parentElement.parentElement.remove()
        }
    }

}
//给修改表单按钮绑定事件
editUsersForm.onsubmit = async function (evt) {
    evt.preventDefault()
    let res = await fetch(`http://localhost:3000/users/${data_id}`, {
        method: "PATCH",
        headers: {
            "content-type": "application/json"
        },
        body: JSON.stringify({
            username: editusername.value,
            password: editpassword.value,
            instruction: introduction.value,
            photo
        })
    }).then(res => res.json())
    editUsersForm.style.display = "none";
    zhezhao.style.display = "none";
}
//添加头像图片时，转换成base64格式
userhead.onchange = function (evt) {
    let reader = new FileReader()
    reader.readAsDataURL(evt.target.files[0])
    reader.onload = function (e) {
        photo = e.target.result
    }
    // console.log(photo)
}
//取消修改
edit_cancel.onclick = function () {
    editUsersForm.style.display = "none";
    zhezhao.style.display = "none";
}
